<template>
  <div class="box">
    <el-card class="one-card">
      <div class="form-div">
        <el-form ref="form" :model="form" label-width="100px">
          <div class="div-flex">
            <div>
              <el-form-item label="用户账号">
                <el-input v-model="form.name" size="small"></el-input>
              </el-form-item>
              <el-form-item label="用户类型">
                <el-select placeholder="请选择" size="small">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>

            <div>
              <el-form-item label="用户昵称">
                <el-input v-model="form.name" size="small"></el-input>
              </el-form-item>
              <el-form-item label="审核状态">
                <el-select placeholder="请选择" size="small">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>

            <div>
              <el-form-item label="注册时间">
                <el-date-picker
                  size="small"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right"
                >
                </el-date-picker>
              </el-form-item>
            </div>
          </div>
          <div class="bottom-button">
            <el-form-item>
              <el-button
                type="primary"
                @click="onSubmit"
                size="small"
                class="chaxun-css"
                >查询</el-button
              >
              <el-button size="small" class="qk-css">清空</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-card>
    <el-card class="two-card">
      <!-- <div>
        <el-button
          type="primary"
          size="small"
          class="addBtn"
          @click="dialogVisible = true"
          ><i class="el-icon-plus"></i> 添加会员</el-button
        >
      </div> -->

      <div class="table-css">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{ background: '#e4eaec', color: '#606266' }"
        >
          <el-table-column prop="date" label="用户账号" align="center">
          </el-table-column>
          <el-table-column prop="name" label="昵称" align="center">
          </el-table-column>
          <el-table-column prop="address" label="类型" align="center">
          </el-table-column>
          <el-table-column prop="address" label="推荐人" align="center">
          </el-table-column>
          <el-table-column prop="address" label="余额" align="center">
          </el-table-column>
          <el-table-column prop="address" label="累计奖励" align="center">
          </el-table-column>
          <el-table-column prop="address" label="任务情况" align="center">
          </el-table-column>
          <el-table-column prop="address" label="注册时间" align="center">
          </el-table-column>
          <el-table-column prop="address" label="审核状态" align="center">
          </el-table-column>
          <el-table-column prop="address" label="银行卡号" align="center">
          </el-table-column>

          <el-table-column prop="status" label="状态" align="center">
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            width="220px"
            align="center"
          >
            <template slot-scope="scope">
              <div class="btn-flex">
                <el-button
                  @click="fundDetails(scope.row)"
                  size="small"
                  class="xqxx-btn"
                  >查看资金明细</el-button
                >

                <div v-if="scope.row.status == 0">
                  <el-button
                    @click="handleClick(scope.row)"
                    size="small"
                    class="dj-btn"
                    >已审核</el-button
                  >
                </div>

                <div v-else-if="scope.row.status == 1">
                  <el-button
                    @click="verification(scope.row)"
                    size="small"
                    class="jd-btn"
                    >身份审核</el-button
                  >
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="fenye-css">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            background
          >
          </el-pagination>
        </div>
      </div>
    </el-card>

    <el-dialog
      title="添加会员："
      :visible.sync="dialogVisible"
      width="720px"
      :before-close="handleClose"
    >
      <div class="dialog-div">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="上级ID">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="账号">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="性别">
            <el-radio v-model="radio" label="1">男</el-radio>
            <el-radio v-model="radio" label="2">女</el-radio>
          </el-form-item>
          <el-form-item label="登录密码">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="支付密码">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="会员等级">
            <el-radio v-model="radio" label="1">钻石会员</el-radio>
            <el-radio v-model="radio" label="2">铂金会员</el-radio>
            <el-radio v-model="radio" label="2">白银会员</el-radio>
            <el-radio v-model="radio" label="2">白银会员</el-radio>
            <el-radio v-model="radio" label="2">白银会员</el-radio>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div class="btn-css-dialog">
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            @click="dialogVisible = false"
            class="tijiao-btn"
            >提交</el-button
          >
        </span>
      </div>
    </el-dialog>

    <el-dialog
      title="资金明细"
      :visible.sync="fundDialogVisible"
      width="720px"
      :before-close="handleClose"
    >
      <div>
        <el-table :data="tableData1" style="width: 100%">
          <el-table-column prop="date" label="提现金额（元）">
          </el-table-column>
          <el-table-column prop="name" label="提现申请时间"> </el-table-column>
          <el-table-column prop="address" label="转账时间"> </el-table-column>
          <el-table-column prop="address" label="提现账户"> </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <el-dialog
      title="身份审核"
      :visible.sync="isVerification"
      width="720px"
      :before-close="handleClose"
    >
      <div>
        <div class="darenjitu">
          <span>达人截图</span>
        </div>
       <div class="div-ipc">
        <viewer :images="image">
         <img src="../../../assets/bg1.png" alt="" class="pic-css" />
        </viewer>
       </div>
        <div class="dianji-css">
          <span>点击图片可查看大图</span>
        </div>
      </div>
      <div class="shenhe-css">
        <span>审核</span>
        <el-radio v-model="radio" label="1">通过</el-radio>
        <el-radio v-model="radio" label="2">驳回</el-radio>
      </div>
      <div class="btn-css-dialog">
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            @click="dialogVisible = false"
            class="tijiao-btn"
            >提交</el-button
          >
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          status: 0,
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          status: 1,
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          status: 0,
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          status: 1,
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      tableData1: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      dialogVisible: false,
      radio: "1",
      fundDialogVisible: false,
      isVerification: false,
      radio:"1"
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    fundDetails(i) {
      this.fundDialogVisible = true;
    },
    verification(i) {
      this.isVerification = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.pic-css {
  width: 100px;
  height: 100px;
  margin-left: 10px;
}

.shenhe-css{
  margin-top: 80px;
  span{
    margin-right: 40px;
  }
}
.btn-css-dialog{
  margin-top: 80px;
}
.dianji-css{
  margin-left: 60px;
}
.div-ipc{
  margin-left: 60px;
  margin-top: -12px;
}
.box {
  .one-card {
    margin: 20px;
    .form-div {
      margin-left: 60px;
      .div-flex {
        display: flex;
        div {
          margin-right: 10px;
        }
      }
      .bottom-button {
        display: flex;
        justify-content: center;
        margin-right: 180px;
        .chaxun-css {
          background-color: #2f71a9;
          border-color: #2f71a9;
        }
        .qk-css {
          background-color: #e1e5ec;
          border-color: #e1e5ec;
        }
      }
    }
  }
  .two-card {
    margin: 20px;
    margin-top: 30px;
    .addBtn {
      background-color: #2f71a9;
      border-color: #2f71a9;
    }
    .table-css {
      margin-top: 20px;
    }
    .btn-flex {
      display: flex;
      .xqxx-btn {
        width: 100px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fdad1f;
        color: #fff;
      }
      .zjmx-btn {
        width: 80px;
        height: 30px;
        display: flex;
        align-items: center;
        background-color: #c75337;
        color: #fff;
      }
      .yecz-btn {
        width: 80px;
        height: 30px;
        display: flex;
        align-items: center;
        background-color: #2f71a9;
        color: #fff;
      }
      .del-btn {
        height: 30px;
        display: flex;
        align-items: center;
        background-color: #acbac2;
        color: #fff;
      }
      .jd-btn {
        margin-left: 10px;
        height: 30px;
        display: flex;
        align-items: center;
        background-color: #28acb8;
        color: #fff;
      }
      .dj-btn {
        margin-left: 10px;
        height: 30px;
        display: flex;
        align-items: center;
        background-color: #acbac2;
        color: #fff;
      }
    }
    .fenye-css {
      margin-top: 20px;
      text-align: right;
    }
  }

  .el-input--small {
    width: 200px;
  }
  ::v-deep .el-dialog__title {
    color: #3172aa;
    font-size: 16px;
    margin-left: 50px;
  }
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #e8f0f6;
    padding-bottom: 20px;
    padding-top: 20px;
  }
  .dialog-div {
    margin-left: 43px;
    ::v-deep .el-input__inner {
      width: 480px;
      height: 30px;
    }
    ::v-deep .el-form-item__label {
      text-align: left;
    }
  }
  .btn-css-dialog {
    display: flex;
    justify-content: center;
    .tijiao-btn {
      height: 30px;
      display: flex;
      align-items: center;
      background-color: #2f71a9;
      border-color: #2f71a9;
    }
  }
}
</style>
